<template>
  <div :class="{'mobile-detail-wrap': showMobilePage}" class="closingAccount-container">
    <WriteOffDataCom
      :write-off-data="writeOffData"
      :show-mobile-page="showMobilePage"
      :show-refresh-time="tabsActive === 0 && hasRouteAuth('crm:finance:sellFirstTrial')"
      :id="sealingId"
      style="padding: 0 24px;"
      @refreshSuccess="refreshTime"
      @refreshData="refreshData" />

    <div style="margin-top:30px">
      <Title :is-show="false" :total="10" title="封账列表" style="flex: 1;padding: 0 24px;" />
      <DetailTabs v-model="tabsActive" :tabs="tabs" class="list-tabs" @tabClick="switchTab" />
      <SealTable
        ref="sealTableRef"
        :is-show-select="true"
        :show-title="false"
        :process-state="tabsActive"
        :is-recheck="tabsActive === 1"
        :sealing-id="sealingId"
        :is-report="false"
        @refreshData="refreshData"/>
      <fixed-pagination class="center">
        <el-button v-if="tabsActive !== 1 && hasRouteAuth('crm:finance:sellFirstTrial')" type="primary" size="small" @click="cancelSeal">取消封账</el-button>
        <el-button v-if="tabsActive === 1 && hasRouteAuth('crm:finance:financeRecheck')" type="primary" size="small" @click="sealingBill">封账</el-button>
        <el-button type="primary" size="small" plain @click="tofail">返回</el-button>
      </fixed-pagination>
    </div>

  </div>
</template>

<script>
// components
import Title from '@/components/Title';
import WriteOffDataCom from '@/views/finance/sealingAccount/module/writeOffData';
import SealTable from '@/components/Finance/sealing/SealTable';
import DetailTabs from '@/components/Common/baseComponent/DetailTabs';
// tool
import { hasRouteAuth } from '@/utils/permission';
import { showModal } from '@/utils/message';
// api
import { cancelSealing, sealBill } from '@/api/sealingAccount';
import { mapState } from 'vuex';

export default {
  components: { Title, WriteOffDataCom, SealTable, DetailTabs },
  props: {
    sealingId: {
      type: Number,
      default: null
    },
    writeOffData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      tabsActive: 2,
      tabs: [
        { id: 2, name: '待封账' },
        { id: 0, name: '待初审' },
        { id: 1, name: '待复审' }
      ]
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    hasRouteAuth,
    refreshData() {
      this.$emit('refreshData');
    },
    refreshTime() {
      this.$refs.sealTableRef.initData(); // 刷新列表
    },
    // 方法
    cancelSeal() {
      this.$confirm('<div>请确认是否取消封账</div><div style="color: #999;font-size: 16px;margin-top: 12px">若取消封账，所有审批项的审批状态变为待审批</div>', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        iconClass: 'del-icon',
        customClass: 'del-message del-message-cancel',
        center: true,
        dangerouslyUseHTMLString: true,
        type: 'warning'
      }).then(() => {
        cancelSealing(this.sealingId).then(res => {
          this.$router.push({
            name: 'sealingAccount'
          });
        });
      }).catch(() => {
        return false;
      });
    },
    sealingBill() {
      showModal('<div>请确认是否封账</div>', '', {
        showClose: true,
        center: true,
        dangerouslyUseHTMLString: true
      }).then(() => {
        sealBill(this.sealingId).then(res => {
          if (res.code === 200) {
            this.$message.success('封账成功!');
            this.refreshData();
            this.$refs.sealTableRef.initData();
          } else {
            const { data = {}} = res;
            const columnType = [
              { order: '订单' },
              { flow: '流水' },
              { record: '核销记录' },
              { cost: '成本' }
            ];
            const template = columnType.map((item) => {
              const key = Object.keys(item)[0];
              return `<p><span>${item[key]}：</span>${data[key] || 0}条</p>`;
            });
            showModal(`<div><div class="title">存在以下待审批或未过审内容请处理后再进行封账</div><div class="msg-content">${template.join('')}</div></div>`, '', {
              showClose: true,
              center: true,
              dangerouslyUseHTMLString: true,
              customClass: 'del-message del-message-cancel message-closing-acount'
            });
          }
        }, result => {
          // this.$message.error(result.message);
        }).catch(err => {
          console.error(err);
        });
      });
    },
    tofail() {
      this.$router.push({
        name: 'sealingAccount'
      });
    },
    switchTab(tab) {
      this.$refs.sealTableRef.initData(true); // 刷新列表
    }
  }
};
</script>

<style lang="scss" scoped>
.closingAccount-container {
  margin-top: 16px;
  padding-bottom: 50px;
  .mobile-detail-wrap {
    ::v-deep .position-b49 {
      &.center {
        justify-content: flex-start;
      }
    }
  }
  &.mobile-detail-wrap {
    margin: 0 !important;
    .mobile-pagination {
      .el-button {
        flex: 1;
      }
    }
  }
}
.list-tabs {
  margin-top: 16px;
  padding: 0 24px;
}
</style>
<style lang="scss">
.el-message-box--center.message-closing-acount .el-message-box__content {
  padding-top: 0px;
  padding-bottom: 0px;
  .title {
    display: inline-block;
    margin-bottom: 16px;
    width: 208px;
    font-size: 16px;
    line-height: 20px;
  }
  .msg-content{
    display: flex;
    flex-wrap: wrap;
    margin-left: -28px;
    width: 400px;
    p {
      width: 200px;
      padding: 4px 50px 8px 32px;
      font-size: 14px;
      line-height: 20px;
      font-weight: normal;
      span {
        color: #999;
      }
      &:nth-child(odd) {
        padding-left: 0;
        border-right: 1px solid #EBEEFD;
        text-align: right;
      }
      &:nth-child(even) {
        padding-right: 0;
        text-align: left;
      }
    }
  }
}
</style>
